<template>
  <div class="gaugeChart" ref="gaugeChart" style="width: 800px; height: 500px"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      let myChart = this.$echarts.init(this.$refs.gaugeChart);
      let option = {
        series: [
          {
            backgroundColor: 'pink',
            name: '内层数据刻度',
            type: 'gauge',
            // 外层渐变加刻度修改大小  如改这个配置   请同步修改内圈及指针
            radius: '300',
            // 最大最小值
            min: 0,
            max: 100,

            center: ['50%', '75%'],
            startAngle: 186,
            endAngle: -6,

            // 刻度分割比例
            splitNumber: 10,

            // 设置外侧背景色
            axisLine: {
              show: true,
              //  圆角
              roundCap: true,
              lineStyle: {
                width: 12,
                // 颜色渐变
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: '#DB7E41',
                      },
                      {
                        offset: 0.8,
                        color: '#7CAEFF',
                      },
                      {
                        offset: 1,
                        color: '#58BF7C',
                      },
                    ]),
                  ],
                ],
              },
            },

            // 修改刻度线样式
            axisTick: {
              show: true,
              splitNumber: 100,
              // 刻度长度(宽)
              length: 60,
              // 距离渐变色圈的位置比
              distance: 0,
              //  变成粉色背景 透明度越高, 刻度线就不会显示出来
              lineStyle: {
                color: 'rgba(254, 69, 27, 0.06)',
                opacity: 0.2,
              },
            },
            splitLine: {
              show: false,
            },
            // 刻度文字 配置
            axisLabel: {
              // 距离渐变色圈的位置比
              distance: 10,
              fontSize: 18,
              color: 'red',
            },
            // 指针配置
            pointer: {
              // 指针长度
              length: '55',
              // 指针形状
              icon: 'triangle',
              width: 6,
              // 指针位置 5.0.1 支持
              offsetCenter: [0, '-40%'],
              // 指针样式配置对象
              itemStyle: {
                color: 'rgba(124, 174, 255, 1)',
              },
            },
            // 中间文字配置
            detail: {
              offsetCenter: ['0%', '0%'],
              color: 'rgba(124, 174, 255, 1)',
              fontSize: 30,
              fontFamily: 'DIN-Regular',
            },
            data: [
              {
                value: 40,
              },
            ],
          },
          {
            name: '最内层线',
            type: 'gauge',
            // 外层修改 这个需同步修改
            radius: '200',

            center: ['50%', '75%'],
            startAngle: 186,
            endAngle: -6,

            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            // 线的修改
            axisLine: {
              show: true,
              lineStyle: {
                color: [[1, 'rgba(254, 69, 27, 0.06)']],
                // 宽度  指针覆盖的那个
                width: 80,
                opacity: 0.5,
              },
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 40,
                // value: data
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped></style>
